<template>
  <div style="margin-top: 20px">
    <el-row :gutter="15">
      <el-form ref="placingForm" :model="searchData" size="medium" label-width="100px">
        <el-col :span="16">
          <el-form-item label="门诊号" prop="clinicNo">
            <el-input v-model="searchData.clinicNo" placeholder="请输入门诊号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类别" prop="kind">
            <el-select v-model="searchData.kind" placeholder="请选择类别" :style="{width: '100%'}">
              <el-option v-for="(item, index) in kindOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="患者" prop="patientId">
            <!--<el-input v-model="searchData.patientId" placeholder="请输入患者" clearable :style="{width: '100%'}">
            </el-input>-->
            <el-autocomplete
              v-model="searchData.name"
              :fetch-suggestions="getNameData"
              placeholder="请输入姓名"
              @select="getChoose"
              clearable
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出库情况" prop="status">
            <el-select v-model="searchData.status" placeholder="请选择下拉选择" :style="{width: '100%'}">
              <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="日期范围" prop="rangeDate">
            <el-date-picker type="datetimerange" v-model="searchData.rangeDate" format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" start-placeholder="开始日期"
                            end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-table
      :data="dataList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :row-class-name="tableRowClassName"
      v-show="dataList.length > 0"
    >
      <el-table-column label="门诊号" prop="clinicNo" align="center" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.clinicNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="出库批次" prop="batchNo" align="center" width="200">
        <template slot-scope="{ row }">
          <el-popover trigger="hover" placement="top">
            <el-row>
              <el-button type="primary" @click="check(row)">查看商品列表</el-button>
            </el-row>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ row.batchNo }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="姓名" prop="patientName" align="center">
        <template slot-scope="{ row }">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ row.patientName }}</p>
            <p>联系电话: {{ row.tel | hideTel }}</p>
            <p>住址: {{ row.addr }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ row.patientName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="申请人" prop="doctorName" align="center">
        <template slot-scope="{ row }">
          <span>
            {{row.doctorName}}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="申请来源" prop="kind" align="center">
        <template slot-scope="{ row }">
          <span>
            {{row.kind | orderKind}}
          </span>
        </template>
      </el-table-column>

      <!--<el-table-column label="手机号码" prop="tel" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.tel | hideTel }}</span>
        </template>
      </el-table-column>-->

      <el-table-column label="下单时间" prop="orderDate" align="center" width="160">
        <template slot-scope="{ row }">
          <span>{{ row.orderDate | timeFormat }}</span>
        </template>
      </el-table-column>

      <el-table-column label="出库情况" prop="status" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.status | showFinish  }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="id" align="center" width="200">
        <template slot-scope="{ row }" v-if="row.status != 2">
          <el-popover trigger="hover" placement="top">
            <el-row>
              <el-button v-if="row.status == 1" type="primary" @click="checkPlacing(row,3)">
                <span>审批出库</span>
              </el-button>
              <el-button v-if="row.status == 3" type="info" @click="checkPlacing(row,9)">
                <span>完成出库</span>
              </el-button>
            </el-row>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">出库</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <!--<el-pagination v-show="dataList.length > 0"
                   :page-size="searchData.pageSize"
                   layout="prev, pager, next"
                   :total="searchData.totalCount"
                   @prev-click="submitForm(-1)"
                   @next-click="submitForm(1)"
    ></el-pagination>-->

    <pagination
      :total="searchData.totalCount"
      :page.sync="searchData.page"
      :limit.sync="searchData.pageSize"
      @pagination="submitForm"
    />

    <el-dialog :visible.sync="dialogVisible" title="出库清单">
      <el-table
        :data="products"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="id" prop="id" align="center" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="商品名称" prop="productName" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.productName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="商品编码" prop="productCode" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.productCode }}</span>
          </template>
        </el-table-column>

        <el-table-column label="需求数量" prop="num" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.num }}</span>
          </template>
        </el-table-column>

      </el-table>

      <!--<el-pagination v-show="productData.length > 0"
                     :page-size="productData.pageSize"
                     layout="prev, pager, next"
                     :total="productData.totalCount"
                     @prev-click="searchProducts(-1)"
                     @next-click="searchProducts(1)"
      ></el-pagination>-->

      <pagination
        :total="productData.totalCount"
        :page.sync="productData.page"
        :limit.sync="productData.pageSize"
        @pagination="searchProducts"
      />
    </el-dialog>

  </div>
</template>
<script>
  import {getPatients} from "@/api/patient";
  import {getTreatRecord} from "@/api/treatRecord";
  import {searchPlacing, searchPlacingProducts, editPlacing} from "@/api/order";
  import {getDate, formatDate} from "@/utils/date";
  import Pagination from "@/components/Pagination";


  export default {
    components: {Pagination},
    name: "placingRecord",
    data() {
      return {
        dialogVisible: false,
        productData: {
          batchNo: null,
          page: 0,
          totalCount: 0,
          totalPage: 1,
          pageSize: 10
        },
        products: [],
        dataList: [],
        searchData: {
          clinicNo: null,
          kind: null,
          patientId: null,
          isFinish: null,
          rangeDate: ["", ""],
          page: 0,
          totalCount: 0,
          totalPage: 1,
          pageSize: 10
        },
        kindOptions: [
          {"value": "0", "label": "门诊就诊"},
          {"value": "1", "label": "视光销售"},
          {"value": "2", "label": "加工申请"}
        ],
        statusOptions: [
          {"value": "1", "label": "申请"},
          {"value": "2", "label": "取消"},
          {"value": "3", "label": "审批出库"},
          {"value": "9", "label": "完成出库"}
        ],
      }
    },
    computed: {
      newName() {
        return this.searchData.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
        if (this.searchData.name === "") {
          this.searchData.patientId = null
        }
      }
    },
    created() {
      window.app = this
      this.searchData.rangeDate[1] = formatDate(getDate(0))
      this.searchData.rangeDate[0] = formatDate(getDate(-7))
      this.submitForm();
    },
    filters: {
      timeFormat(t) {
        return new Date(t).Format("yyyy-MM-dd hh:mm:ss");
      },
      hideTel(tel) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return tel.replace(reg, "$1****$2");
      },
      showFinish(k) {
        let result = {1: "预支付申请", 2: "取消", 3: "审批出库", 9: "完成出库"}
        return result[k]
      },
      orderKind(k) {
        let o = {0: "门诊就诊", 1: "视光销售", 2: "加工申请"}
        return o[k]
      },
      showGender(d) {
        let gender = {1: "男", 2: "女"};
        return gender[d];
      },
      age(strBirthday) {
        if (strBirthday) {
          let strBirthdayArr = strBirthday.split("-");
          let d = new Date();
          let yearDiff = d.getFullYear() - strBirthdayArr[0];
          let monthDiff = d.getMonth() + 1 - strBirthdayArr[1];
          let dayDiff = d.getDate() - strBirthdayArr[2];
          let age = monthDiff < 0 || (monthDiff === 0 && dayDiff < 0) ? yearDiff - 1 : yearDiff;
          //判断有没有到生日,没到就减1
          return age <= 0 ? monthDiff + "月" : age + "岁";
        }
      }
    },
    computed: {
      newName() {
        return this.searchData.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
        if (this.searchData.name === "") {
          this.searchData.patientId = null
        }
      }
    },
    methods: {
      checkPlacing(row, status) {
        row.status = status
        console.log(row);
        console.log(status);
        editPlacing(row).then(response => {
          if (response.code === 200) {
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success"
            });
          }
        });
      },
      tableRowClassName({row, rowIndex}) {
        if (row.isFinish === "1") {
          return 'success-row';
        }
        return '';
      },
      searchProducts(n) {
        if (typeof n === "number") {
          this.productData.page = this.productData.page + n;
        }
        searchPlacingProducts(this.productData).then(response => {
          if (response.code === 200) {
            this.products = response.page.list;
            this.productData.page = response.page.currPage;
            this.productData.totalPage = response.page.totalPage;
            this.productData.totalCount = response.page.totalCount;
          }
        });
      },
      check(row) {
        this.dialogVisible = true
        this.productData.batchNo = row.batchNo
        this.searchProducts()
      },
      geTel(tel) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return tel.replace(reg, "$1****$2");
      },
      remote(data, cb) {
        let _that = this;
        getPatients(data).then(response => {
          if (response.code === 200) {
            let data = response.page.list;
            data.filter(function (a) {
              a.value = a.name + "-" + _that.geTel(a.tel);
            });
            cb(data);
          }
        });
      },
      //查询病人信息select
      getNameData(queryString, cb) {
        this.remote({name: queryString}, cb);
      },
      //获取病人名字查询
      getChoose(val) {
        this.searchData.patientId = val.id;
        this.searchData.page = 0;
        this.searchData.pageSize = 10;
        this.submitForm()
      },
      submitForm(n) {
        if (typeof n === "number") {
          this.searchData.page = this.searchData.page + n;
        }

        this.searchData.beginTime = this.searchData.rangeDate[0]
        this.searchData.endTime = this.searchData.rangeDate[1]

        searchPlacing(this.searchData).then(response => {
          if (response.code === 200) {
            this.dataList = response.page.list;
            this.searchData.page = response.page.currPage;
            this.searchData.totalPage = response.page.totalPage;
            this.searchData.totalCount = response.page.totalCount;
          }
        });
      },
      resetForm() {
        this.searchData.name = null
        this.$refs['placingForm'].resetFields()
      },
    }
  }

</script>
<style>
  .el-autocomplete {
    width: 100%;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #c2f9b3;
  }
</style>
